<transition name="fade">
  <div id="animate-index">
    <button @click="to">asa</button>
    <div class="dashboard-container">
      <div style="display: flex">
        <el-input v-model="videoUrl" placeholder="请输入视频地址"></el-input>
        <el-button @click="captureVideo(3)" type="success">截取</el-button>
        <el-button @click="clearImg()" type="warning">清空图片</el-button>
      </div>
      <div style="display: flex;flex-wrap: wrap;margin-top: 10px">
        <video :src="videoUrl" id="video" controls="controls" crossorigin="anonymous" playsinline autoplay muted
          loop></video>
        <img class="img" v-for="(item) in imgList" :src="item" />
      </div>
    </div>
    <btn></btn>
    <div v-for="item in datalist" :key="item.id">
      {{item.id}}
      <el-input-number v-model="item.value"></el-input-number>

    </div>
    {{datalist}}
    <button @click="fndou">防抖</button>
    <button @click="jieliu">节流</button>
    <div class="animate-index-div animate__animated animate__fadeInLeft">
      <Flex>
        <span>延迟{{ mode }}</span>
      </Flex>
      <tree1></tree1>
      <video src="http://localhost:4000/video" controls></video>
      <div id="container" class="friends-word-cloud" style="width: 500px;height: 300px;"></div>
      <button @click="()=>{$store.dispatch('actHello')}">12</button>
      <timea />
      <el-button @click="openbig">{{ big | str }}</el-button>
      <model v-model="mode" />
      <rend a="a1" />
      <h1 class="animate__animated animate__bounce">An animated element</h1>
      <h2 :class="cls">asa</h2>
      <el-color-picker :value="color" @change="colorChange"></el-color-picker>
      <span class="green" :style="style">12</span>
      <div class="animate__animated animate__bounce animate__delay-3s">
        Example
      </div>
      <i>慢，快</i>
      <div class="animate__animated animate__bounce animate__faster">
        Example
      </div>
      <span class="span">重复</span>
      <div class="animate__animated animate__bounce animate__repeat-2">
        Example
      </div>
    </div>
    {{ str }}
    <dinput :value="str" @input="(val) => inp(val)"></dinput>
    <dinput v-model:show="str" @show="show" />
    {{ value }}
    <dselect :value="value" @input="(val) => cha(val)" />
    <dselect v-model="value" />
    {{ radio }}
    <dradio :value="radio" @input="(val) => rad(val)" />
    <dradio v-model="radio" />
    {{ val }}{{ foo }}
    <bind :foo.sync="foo">
      <template #sex="row">男{{ row }}</template>
    </bind>
    <bind :foo.sync="foo">
      <template v-slot:sex="row">男{{ row }}</template>
    </bind>
    <!-- (va) => {
          val = va; 
        } => val = $event -->
    <bind :foo.sync="foo" :val="val" @update:val="
        (va) => {
          val = va; 
        }
      ">
      <template slot="sex" slot-scope="row">男{{ row }}</template>
    </bind>
    <div id="example-3">
      <button @click="show = !show">Toggle render</button>
      <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave"
        v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" name="custom-classes-transition"
        enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
        <p v-show="show">hello</p>
      </transition>
    </div>
    <qrcode />
    <xlsx />
    <xlsx1 />
    <slide />
    <scrollTop />
    <online offlineTitle="断网处理标题" desc="断网处理描述" onlineTitle="连网提醒" />
    <el-backtop :visibility-height="23">
      <el-dropdown placement="top">
        <span class="el-icon-arrow-up"></span>
        <el-dropdown-menu>
          <el-dropdown-item></el-dropdown-item>
          <el-link href="#sy">首页</el-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-link href="#mr">每日特价</el-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-link href="#ms">限时秒杀</el-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-backtop>
  </div>
</transition>